{% extends 'temp.html' %}
{% block type %}
    <div class="bs-example" data-example-id="panel-without-body-with-table">
        <div class="panel panel-default">
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"
                    style="margin: 10px 10px;">
                请假
            </button>
            <div style="float:right;width:300px;margin: 10px 10px;">

                <form method="get">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" placeholder="搜索信息" value="{{ seach_list }}">
                        <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit">
                                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                        </button>
                                     </span>
                    </div>
                </form>
            </div>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">员工请假</h4>
                        </div>
                        <form style="margin: 10px 10px" id="addform">
                            <div class="modal-body">
                                <div class="clearfix">
                                    {% for em in form %}
                                        <div class="col-xs-12">
                                            <div class="form-group" style="position: relative;margin-bottom:15px;">
                                                <label>{{ em.label }}</label>
                                                {{ em }}
                                                <span style="color:red;position: absolute;" class="err-img"></span>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                            <button type="button" id="btn1" class="btn btn-primary">提 交</button>
                        </div>

                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
            {#  删除  对话框  #}
            <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="alert alert-danger alert-dismissible fade in" role="alert"
                             style="margin-bottom: 0px;">
                            <h4>是否确定删除!</h4>
                            <p style="padding: 10px 2px;">如果删除的话，相关关联的数据也会被删除掉.</p>
                            <p style="text-align: right;">
                                <button id="bindConfirmDelete" type="button" class="btn btn-danger">确 定</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-heading">
                <h3>请假信息</h3>
            </div>
            <table class="table">
                <thead>
                <tr class="success">
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>部门</th>
                    <th>请假内容</th>
                    <th>请假时间</th>
                    <th>销假时间</th>
                    <th>请假状态</th>
                    <th>审核员</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for i in daset %}
                    <tr>
                        <th scope="row">{{ i.id }}</th>
                        <td>{{ i.user }}</td>
                        <td>{{ i.age }}</td>
                        <td>{{ i.get_sex_display }}</td>
                        <td>{{ i.deart }}</td>
                        <td>{{ i.test }}</td>
                        <td>{{ i.times|date:'Y-m-d' }}</td>
                        <td>{{ i.retime|date:'Y-m-d' }}</td>
                        <td>{{ i.get_level_display }}</td>
                        <td>{{ i.admins.user_n }}</td>
                        <td>
                            <input uid="{{ i.id }}" type="button" class="btn-success btn-xs btn-edit" value="销假">
                            <input uid="{{ i.id }}" type="button" class="btn-warning btn-xs btn-delete" value="删除">
                        </td>

                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
        <ul class="pagination" style="margin: 10px 254px;position: relative;top: 0;left: 15%;">
            {{ page_string }}
        </ul>
    </div>
{% endblock %}

{% block js %}
    <script>
        var EDIT_ID;
        var DELETE_ID;
        $(function () {
            //新建请假
            btnAdd();
            //销假
            bindBtn();
            //销假弹出的窗口
            bindBtnEditEvent();
            //删除
            bindBtnDeleteEvent();
            //删除窗口
            bindConfirmDeleteEvent();
        })

        //显示框
        function btnAdd() {
            $('#btnAdd').click(function () {
                //将正在编辑的id设置为空
                EDIT_ID = undefined;

                //清空对话框里的内容
                $('#addform')[0].reset();
                //修改标题
                $('.modal-title').text('请假');
                //显示新建订单框
                $('#myModal').modal('show');
            })
        };

        //新建请假 编辑销假
        function bindBtn() {
            //当点击提交按钮的时候 进行判断是新建还是编辑
            $('#btn1').click(function () {
                //清除错误信息
                $('.err-img').empty();

                //判断EDIT_ID等于当前行id  是false还是 true
                if (EDIT_ID) {
                    //编辑
                    doEdit();
                } else {
                    //新建
                    doAdd();
                }

            })
        }

        function doAdd() {
            //向后台发送ajax请求
            $.ajax({
                url: '/order/add/',
                type: 'post',
                data: $('#addform').serialize(),
                dataType: 'JSON',
                success: function (res) {
                    if (res.staut) {
                        alert('添加成功');
                        //清空表单  $('#addform')是jquery对象  $('#addform')[0]是DOM对象
                        $('#addform')[0].reset();
                        //关闭请假假框
                        $('#myModal').modal('hide');
                        //刷新页面
                        location.reload();
                    } else {
                        {#遍历错误信息#}
                        $.each(res.error, function (name, data) {
                            $("#id_" + name).next().text(data[0])
                        })
                    }
                }
            })
        };

        function doEdit() {
            //向后台发送ajax请求
            $.ajax({
                url: '/order/edit/' + '?uid=' + EDIT_ID,   //order/edit/?uid=123
                type: 'post',
                data: $('#addform').serialize(),
                dataType: 'JSON',
                success: function (res) {
                    //判断数据为true或false
                    if (res.staut) {
                        //清空表单
                        $('#addform')[0].reset();
                        //关闭对话框
                        $('#myModal').modal('hide');
                        //刷新页面
                        location.reload();
                    } else {
                        //判断数据存不存在
                        if (res.tpis) {
                            alert(res.tpis)
                        } else {
                            //如果错误存在 上传到页面显示
                            $.each(res.error, function (name, data) {
                                $('#id_' + name).next().text(data[0])
                            })

                        }
                    }
                }
            })


        };

        function bindBtnEditEvent() {

            $('.btn-edit').click(function () {
                //清空表单  $('#addform')是jquery对象  $('#addform')[0]是DOM对象
                $('#addform')[0].reset();
                //获取到对应行的id
                var uid = $(this).attr('uid');
                EDIT_ID = uid;
                //发送ajax请求到后端
                $.ajax({
                    url: '/order/editGet/',
                    type: 'GET',
                    //将对应行的id传给后端
                    data: {
                        uid: uid,
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.staut) {
                            //打印数据出来
                            console.log(res.data);

                            //遍历数据,并通过标签id 显示到对话框
                            $.each(res.data, function (name, value) {
                                $("#id_" + name).val(value);
                            })
                            //修改编辑标题
                            $('.modal-title').text('销 假');
                            //显示对话框
                            $('#myModal').modal('show');

                        } else {
                            alert(res.error);
                        }
                    }
                })
            })
        }
        //删除
        function bindBtnDeleteEvent() {
            $('.btn-delete').click(function () {
                //alert('点击删除了');
                //显示删除框
                $('#deleteModal').modal('show');

                //获取对应行id并赋值给全部变量
              DELETE_ID=$(this).attr('uid');
            })
        };

        function bindConfirmDeleteEvent() {
            $('#bindConfirmDelete').click(function () {
                  //点击确定按钮，将id发送给后台
                 $.ajax({
                     url:'/order/delete/',
                     type: 'GET',
                     data:{
                        uid:DELETE_ID,
                     },
                     dataType: 'JSON',
                     success:function (res) {
                         if (res.stuat){
                             //删除成功并刷新页面
                              location.reload();
                         }else{
                             //删除失败
                             alert(res.error);
                         }

                     }
                 })
            })
        };

    </script>
{% endblock %}